📊 Step 4: Simple Data Collection

Saving Data Locally and Exporting for Analysis

🎯 Goal: Implement Local Data Collection & Export

This step builds on Step 3 by replacing temporary console logs with persistent data storage in your browser. You'll learn to save data locally using localStorage and export it for analysis.

Local Storage: Persistently save data in the user's browser.
Data Export: Download your complete dataset as JSON (for code) and CSV (for spreadsheets).
Persistent Data: Your data remains even if the page is refreshed.

Rock Paper Scissors - Live Data Collection

Click a choice to log it. Your data is automatically saved to your browser's local storage.

Ready - Click a button to start collecting data

📚 How It Works: Local Storage & Data Flow

💾 Local Storage

This step uses the browser's built-in localStorage API. It's a simple key-value store that persists even when the user closes the tab.

Simple & Built-in: No external libraries or services are needed.
Persistent: Data is saved until the user manually clears their browser data.
Private: Data is stored only on the user's computer.

Want to learn exactly how this demo saves data? Check out our detailed guide on this example's code →

🔍 Data Flow

Click Button: A data object is created.
Save to LocalStorage: The new data is added to an array, which is then saved to localStorage as a JSON string.
Download Data: The "Download" buttons retrieve the JSON string from localStorage, parse it, and convert it into a downloadable file (JSON or CSV).

🔧 Build Your Own Local Data Experiment

Code Example: Saving to localStorage

Saving data is a two-step process: declare your array, add to it, then save the whole array.

                    
// Declare your experiment data array at the top of your script
let experimentData = [];

// Add new trial data to our array
experimentData.push(trialData);

// Save the entire updated array to localStorage
localStorage.setItem('myExperimentData', JSON.stringify(experimentData));

Code Example: Downloading Data as a File

To create a download button, you write a function that converts your data array into a file that the browser can download.

                    
function downloadJSON() {
    // Convert the array of data into a text format
    const dataStr = JSON.stringify(experimentData, null, 2);
    
    // Create a file-like object in the browser
    const dataBlob = new Blob([dataStr], {type: "application/json"});
    
    // Create a temporary, invisible link to trigger the download
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = "experiment-data.json"; // The filename
    link.click(); // Click the link programmatically
}
                    
                

The process is similar for a CSV file, but you have to manually create the headers and rows.

                    
function downloadCSV() {
    // Define the column headers for your file
    const headers = "trial,timestamp,playerChoice,step,status";
    
    // Convert each data object into a single, comma-separated line
    const rows = experimentData.map(d => 
        `${d.trial},${d.timestamp},${d.playerChoice},${d.step},${d.status}`
    );
    
    // Join the headers and all the rows into one big string
    const csvContent = [headers, ...rows].join("\n");
    
    // The rest is the same as the JSON download!
    const dataBlob = new Blob([csvContent], {type: "text/csv"});
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = "experiment-data.csv";
    link.click();
}
                    
                

🤖 AI Prompt: Add Local Data Collection

Use this prompt to add localStorage functionality to your own experiment from Step 3. Be sure to include your existing experiment.js file as context.

AI Prompt: Implement Local Storage

I want to add local data collection to my experiment using localStorage.

I need help with:

A 'logChoice' function that saves data to localStorage.
A function to load existing data from localStorage when the page opens.
Download functions for both JSON and CSV formats.
A button to clear the data from localStorage.

The goal is to collect data that persists between page loads, all locally in the browser.

✅ Step 4 Checklist & Troubleshooting

Verification Checklist

Data persists after refreshing the page. JSON and CSV downloads contain all collected data. "Clear Data" button works and resets the experiment.

Common Issues & Solutions

Data not saving? Check the browser console for errors related to localStorage or JSON.stringify.
Downloads not working? Make sure you have data to download—click some choices first.
Clear Data has no effect? Check that you're not in private/incognito browsing mode.
Data disappeared? Browser data might have been cleared manually, or you might have switched browsers.